<template>
  <view id="calendarTz" class="calendar-tz">
    <view class="calendar-header-box">
      <view id="calendarHeader" class="calendar-header">
        <slot name="top" />
        <view class="week-number">
          <view v-for="(item,index) in language=='cn' ? weekList : weekListEn" :key="item" class="week-number-item">
            <text :style="{color:(index==0||index==weekList.length-1) ? colors.colorPrimary:''}">{{ item }}</text>
          </view>
        </view>
      </view>
    </view>
    <slot />
    <view id="ti" class="ti" :style="{height:height}">
      <view v-for="(item,index) in calendar" :key="index" v-scrolltop="{item:item,date:date||startDate}" class="calendar-wrapper">
        <view v-if="language=='cn'" class="calendar-title flex" :style="{color:getThemeColor}">
          <view v-show="switchMonth" class="dislocal" @click="createClendar('pre')">上一月</view>
          <view class="local flex-1">{{ item.year }} 年 {{ item.month }} 月 </view>
          <view v-show="switchMonth" class="dislocal" @click="createClendar('next')">下一月</view>
        </view>
        <view v-else class="calendar-title flex" :style="{color:getThemeColor}">
          <view v-show="switchMonth" class="dislocal" @click="createClendar('pre')">Prev</view>
          <view class="local flex-1">{{ monthEn[item.month-1] }} {{ item.year }} </view>
          <view v-show="switchMonth" class="dislocal" @click="createClendar('next')">Next</view>
        </view>
        <!--如果普通日期选择-->
        <view v-if="date||(!date&&!startDate&&!endDate)" class="each-month">
          <view
            v-for="(day,idx) in item.dayList"
            :key="idx"
            class="each-day"
            :class="[addClassName(day, item.month, item.year)]"
            @click="chooseDate($event,day, item.month, item.year)"
          >
            <view class="recent" :style="{color:getThemeColor}" v-text="setTip(day, item.month, item.year)" />
            <view class="calendar-day" :style="{background:getBackground(day, item.month, item.year),height:28}">
              {{ !!day?day:'' }}
            </view>
            <view v-if="priceList.length>0" class="price" :style="{color:themeColor}">
              <view v-if="setPrice(day, item.month, item.year) >= 0" style="font-size:12px;">{{ priceList[setPrice(day, item.month, item.year)].price ? '¥'+priceList[setPrice(day, item.month, item.year)].price : '' }}</view>
            </view>
            <view v-if="priceList.length>0 && showHalfPrice" class="price" :style="{color:themeColor}">
              <view v-if="setPrice(day, item.month, item.year) >= 0" style="font-size:12px;">{{ priceList[setPrice(day, item.month, item.year)].halfPrice? '¥'+priceList[setPrice(day, item.month, item.year)].halfPrice : ''}}</view>
            </view>
          </view>
        </view>
        <!--如果酒店/往返模式-->
        <view v-else class="each-month">
          <view
            v-for="(day,idx) in item.dayList"
            :key="idx"
            class="each-day"
            :style="{background:addClassName2(day, item.month, item.year)}"
            :class="[addClassName(day, item.month, item.year),{'clicktime': isCurrent(day, item.month, item.year)}]"
            @click="chooseDate($event,day, item.month, item.year)"
          >
            <view class="recent" :style="{color:getThemeColor}" v-text="setTip(day, item.month, item.year)" />
            <view :style="{background:isCurrent(day, item.month, item.year)?getThemeColor:''}">
              {{ !!day?day:'' }}
            </view>
            <view v-if="priceList.length>0" class="price" :style="{color:themeColor}">
              <view v-if="setPrice(day, item.month, item.year) >= 0" style="font-size:12px;">{{ priceList[setPrice(day, item.month, item.year)].price }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>
<script>
const {
  keys,
  values,
  entries
} = Object
import colors from '@/common/colors'
export default {
  name: 'Calendar',
  directives: {
    scrolltop: {
      // 指令的定义
      inserted: (el, binding, vnode) => {
        var bindingVal = binding.value
        if (!document) return
        // if(bindingVal.isPreMonth<=0) return
        var st = el.getBoundingClientRect().top | 0
        var t = document.getElementById('calendarHeader').getBoundingClientRect().bottom
        var date = bindingVal.date.replace(/-/g, '/').split('/')
        if (!bindingVal.date) {
          date[0] = new Date(new Date().toLocaleDateString()).getFullYear()
          date[1] = new Date(new Date().toLocaleDateString()).getMonth() + 1
        }
        var ymTemp = bindingVal.item.year + '' + bindingVal.item.month
        var ym = date[0] + '' + parseInt(date[1])
        if (ym == ymTemp) {
          document.getElementById('ti').scrollTop = st - t
        }
      }
    }
  },
  props: {
    date: { // 选择的日期（此属性和startDate,endDate互斥）
      type: [String, Object],
      default: ''
    },
    startDate: { // 开始日期
      type: [String, Object],
      default: ''
    },
    endDate: { // 结束日期
      type: [String, Object, Date],
      default: ''
    },
    priceList: { // 价格日历数组
      type: [Array, Object],
      default: function() {
        return []
      }
    },
    disabledList: { // 设定不允许点击的日期
      type: [Array, Object],
      default: function() {
        return []
      }
    },
    initMonthCount: { // 初始化月的个数
      type: [String, Number],
      default: 6
    },
    initPreMonthCount: { // 初始化date或者startDate之前几个月的日历数据
      type: [String, Number],
      default: 0
    },
    mode: { // 模式（默认1），1酒店，2飞机往返
      type: [String, Number],
      default: 1
    },
    switchMonth: { // 是否开始切换月份模式
      type: [String, Boolean],
      default: false
    },
    preDisabled: { // 小于初始的日期的全部disabled置灰
      type: [String, Boolean],
      default: false
    },
    allAbled: { // 全部日期都可选
      type: [String, Boolean],
      default: false
    },
    lang: {
      type: [String],
      default: 'cn'
    },
    themeColor: {
      type: [String, Object, Date],
      default: colors.colorPrimary
    },
    showHalfPrice: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      colors,
      paddindTop: '0',
      height: '100%',
      endDates: '',
      startDates: '',
      monthCount: '',
      dates: '',
      currentMonthNum: 0, // 当前月的索引，switchMonth=true时使用
      isDate: false,
      selectPrice: [], // 保存选择的日期所在的价格
      language: this.lang.toLocaleLowerCase(),
      weekList: ['日', '一', '二', '三', '四', '五', '六'],
      weekListEn: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
      monthEn: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October',
        'November'
      ],
      calendar: [],
      festival: {
        '1/1': '元旦',
        '2/14': '情人节',
        '3/8': '妇女节',
        '3/12': '植树节',
        '3/15': '消费者日',
        '4/1': '愚人节',
        '5/1': '劳动节',
        '5/4': '青年节',
        '5/12': '护士节',
        '6/1': '儿童节',
        '7/1': '建党节',
        '8/1': '建军节',
        '9/10': '教师节',
        '10/1': '国庆节',
        '10/6': '老人节',
        '10/24': '联合国日',
        '12/24': '平安夜',
        '12/25': '圣诞节'
      }
    }
  },
  computed: {
    getThemeColor() {
      var hex = this.themeColor
      if (hex.length == 4) {
        hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`
      }
      var str = 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' +
					hex.slice(5, 7)) + ',1)'
      return str
    },
    getBetweenColor() {
      var hex = this.themeColor
      if (hex.length == 4) {
        hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`
      }
      var str = 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' +
					hex.slice(5, 7)) + ',0.1)'
      return str
    }
  },
  watch: {
    date() {
      this.init()
    },
    startDate() {
      this.init()
    },
    endDate() {
      this.init()
    },
    priceList() {
      this.init()
    },
    disabledList() {
      this.init()
    },
    initMonthCount() { // 初始化月的个数
      this.init()
    },
    initPreMonthCount() { // 初始化date或者startDate之前几个月的日历数据
      this.init()
    },
    preDisabled() { // 小于初始的日期的全部disabled置灰
      this.init()
    },
    allAbled() { // 全部日期都可选
      this.init()
    },
    lang() {
      this.init()
    }
  },
  mounted() {
    this.init()
    // #ifdef H5
    this.height = 'calc(100% - 80px)'
    // #endif
    this.paddindTop = document && document.getElementById('calendarHeader').offsetHeight
  },
  methods: {
    init() {
      // 初始化月的个数
      if (this.initMonthCount < 1) {
        this.monthCount = 1
      } else {
        this.monthCount = this.initMonthCount
      }

      if (this.date) {
        // disableDate用于addClassName方法preDisabled==true的时候使用
        this.dates = this.disableDate = new Date(this.date.replace(/-/g, '/'))
        this.isDate = true
      }
      if (this.startDate) {
        this.startDates = this.disableStartDate = new Date(this.startDate.replace(/-/g, '/'))
      }
      if (this.endDate) {
        this.endDates = new Date(this.endDate.replace(/-/g, '/'))
      }

      this.today = new Date(new Date().toLocaleDateString()).getTime()
      if (this.date && (this.startDate || this.endDate)) {
        this.isDate = true
      }
      if (!this.date && !this.startDate && this.endDate) {
        // disableStartDate用于addClassName方法preDisabled==true的时候使用
        this.startDates = this.disableStartDate = new Date(this.today * 1)
      }
      if (!this.date && !this.startDate && !this.endDate) {
        this.dates = new Date(this.today * 1)
        this.isDate = true
      }

      // 最后可以选择的日期范围
      this.lastDate = this.today + this.monthCount * 30 * 24 * 3600 * 1000

      if (this.date || this.startDate) {
        this.year = new Date(this.dates * 1 || this.startDates * 1).getFullYear()
        this.month = new Date(this.dates * 1 || this.startDates * 1).getMonth() + 1
      } else if (this.endDate) {
        this.endDates = this.today * 1
        this.year = new Date().getFullYear()
        this.month = new Date().getMonth() + 1
      } else {
        this.year = new Date().getFullYear()
        this.month = new Date().getMonth() + 1
      }

      // 查看今年是否设置节假日
      // if (this.language == "cn") {
      // 	this.festivalNew = entries(this.festival).find((item, index) => {
      // 		return item[index] == this.year
      // 	})
      // }

      // 如果初始化date或者startDate之前月份数据
      if (parseInt(this.initPreMonthCount) > 0) {
        this.initPreMonth()
      }

      this.createClendar() // 创建日历数据
    },
    // 初始化date或者startDate之前几个月的日历数据
    initPreMonth() {
      let year = this.year
      let month = this.month - this.initPreMonthCount
      var m = Math.ceil(month / 12)
      this.monthCount = parseInt(this.monthCount) + parseInt(this.initPreMonthCount)
      if (m > 0) {
        year += m - 1
      } else {
        year += m - 1
      }
      if (month > 12) {
        month = month % 12 == 0 ? 12 : month % 12
      }

      if (month <= 0) {
        month = 12 + month % 12
      }
      this.year = year
      this.month = month
    },
    // 创建每个月日历数据，传入月份1号前面用null填充
    createDayList(month, year) {
      const count = this.getDayNum(month, year)
      const _week = new Date(year + '/' + month + '/1').getDay()
      const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]

      for (let i = 29; i <= count; i++) {
        list.push(i)
      }
      for (let i = 0; i < _week; i++) {
        list.unshift(null)
      }
      return list
    },
    // 计算传入月份有多少天
    getDayNum(month, year) {
      const dayNum = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

      if ((year % 4 === 0) && (year % 100 !== 0) || (year % 400 === 0)) {
        dayNum[1] = 29
      }
      return dayNum[month - 1]
    },
    // 根据当天和结束日期创建日历数据
    createClendar(flag = null) {
      if (this.switchMonth) {
        this.monthCount = 1
        if (flag == 'next') {
          this.currentMonthNum += 1
        } else if (flag == 'pre') {
          this.currentMonthNum -= 1
        }
      }

      for (let i = 0; i < this.monthCount; i++) {
        let month = this.month + i + this.currentMonthNum
        let year = this.year
        const _monthData = {
          dayList: [],
          month: '',
          year: ''
        }

        var m = Math.ceil(month / 12)
        if (m > 0) {
          year += m - 1
        } else {
          year += m - 1
        }
        if (month > 12) {
          month = month % 12 == 0 ? 12 : month % 12
        }

        if (month <= 0) {
          month = 12 + month % 12
        }

        _monthData.year = year
        _monthData.month = month
        _monthData.dayList = this.createDayList(month, year)
        if (this.switchMonth) {
          this.calendar = []
        }
        this.calendar.push(_monthData)
      }
    },
    // 获取周末的样式
    getWeekColor(day, month, year) {
      const _date = new Date(year + '/' + month + '/' + day)
      // 设置周末的字体样式
      if (_date.getDay() === 0 || _date.getDay() === 6) {
        return this.getThemeColor
      }
    },
    // 获取普通日期选中样式背景
    getBackground(day, month, year) {
      const _date = new Date(year + '/' + month + '/' + day)
      if (_date * 1 === this.dates * 1) {
        return this.getThemeColor
      }
    },
    // 添加日历样式
    addClassName(day, month, year) {
      if (!day) {
        return
      }
      const _date = new Date(year + '/' + month + '/' + day)
      const className = []
      if (_date * 1 === this.today) {
        className.push('today')
      }
      if (!this.allAbled || this.allAbled == 'false') {
        if (this.initPreMonthCount > 0) {
          var tempDate = new Date(this.year + '/' + this.month + '/01') * 1
          if (_date * 1 < tempDate || _date * 1 > this.lastDate) { // 当天之前和180天之后不可选
            className.push('disabled')
          }
        } else {
          if (_date * 1 < this.today || _date * 1 > this.lastDate) { // 当天之前和180天之后不可选
            className.push('disabled')
          }
        }
      }
      // 设置不允许操作的日期
      if (this.disabledList.length > 0) {
        var notTemp = this.disabledList.map(item => {
          return new Date(item) * 1
        })
        if ((notTemp).includes(new Date(_date) * 1)) {
          className.push(' disabled')
        }
      }

      if (_date * 1 === this.dates * 1) {
        className.push(' clicktime')
      }
      // preDisabled==true时设置小于disableDate的都disable
      if ((this.preDisabled || this.preDisabled == 'true') && this.isDate && _date * 1 < this.disableDate * 1) {
        className.push('disabled')
      }
      if ((this.preDisabled || this.preDisabled == 'true') && !this.isDate && _date * 1 < this.disableStartDate * 1) {
        className.push('disabled')
      }

      return className.join(' ')
    },
    addClassName2(day, month, year) {
      if (!day || this.date) {
        return
      }
      const _date = new Date(year + '/' + month + '/' + day) * 1
      if (_date >= this.startDates * 1 && _date <= this.endDates * 1) {
        return this.getBetweenColor
      }
    },
    // 清除时间 时 分 秒 毫秒
    resetTime(date) {
      date.setHours(0)
      date.setMinutes(0)
      date.setSeconds(0)
      date.setMilliseconds(0)
      return date
    },
    // 设置今天，明天，后天
    setTip(day, month, year) {
      if (!day) {
        return
      }
      const td = year + '/' + month + '/' + day
      const _date = new Date(td) * 1
      const language = this.language.toLocaleLowerCase()

      let tip

      // 设置节假日
      if (!!this.festival && language == 'cn') { // && (_date >= this.today && _date <= this.lastDate) 180范围外是否显示节假日
        tip = this.festival[month + '/' + day]
      }

      if (_date == this.today) {
        tip = language == 'cn' ? '今天' : 'Today'
      } else if (_date - this.today === 24 * 3600 * 1000) {
        tip = language == 'cn' ? '明天' : 'Tmr'
      } else if (_date - this.today === 2 * 24 * 3600 * 1000) {
        tip = language == 'cn' ? '后天' : ''
      }

      if (!this.date && (this.startDate || this.endDate)) {
        if (_date === this.startDates * 1) {
          if (this.mode == 2) {
            if (this.endDates * 1 == 0) {
              tip = language == 'cn' ? '去/返' : 'Go/Back'
            } else {
              tip = language == 'cn' ? '去程' : 'Go'
            }
          } else {
            tip = language == 'cn' ? '入住' : 'Into'
          }
        } else if (_date === this.endDates * 1) {
          if (this.mode == 2) {
            tip = language == 'cn' ? '返程' : 'Back'
          } else {
            tip = language == 'cn' ? '离开' : 'Leave'
          }
        }
      }

      return tip
    },
    // setPrice(day, month, year) {
    // 	if (!day) {
    // 		return;
    // 	}
    // 	const td = year + '/' + month + '/' + day
    // 	const _date = new Date(td) * 1
    // 	var tip = 0
    // 	if (this.priceList.length > 0) {
    // 		tip = this.priceList.findIndex((item, index) => {
    // 			const priceDate = new Date(item.date) * 1
    // 			return priceDate == _date
    // 		})
    // 	}
    // 	if (tip >= 0) {
    // 		return tip
    // 	}
    // },
    // 设置价格
    setPrice(day, month, year) {
      if (!day) {
        return
      }
      if (this.priceList.length <= 0) return
      const idx = this.priceList.findIndex(item => {
        return item.date === `${parseInt(year)}-${parseInt(month)}-${parseInt(day)}`
      })
      if (idx >= 0) {
        return idx
      }
    },
    isCurrent(day, month, year) {
      if (!day) {
        return false
      }

      const _date = new Date(year + '/' + month + '/' + day) * 1
      // 设置开始和结束
      if (_date === this.startDates * 1 || (_date === this.endDates * 1)) {
        return true
      }
    },
    dateFormat(times) {
      const date = new Date(times)
      return {
        year: date.getFullYear(),
        month: parseInt(date.getMonth() + 1) > 9 ? parseInt(date.getMonth() + 1) : '0' + parseInt(date.getMonth() + 1),
        day: date.getDate() > 9 ? date.getDate() : '0' + date.getDate(),
        week: this.weekList[date.getDay()]
      }
    },
    chooseDate(e, day, month, year) {
      if (!day) {
        return
      }

      const _date = new Date(year + '/' + month + '/' + day) * 1
      if (!this.allAbled || this.allAbled == 'false') {
        if (this.initPreMonthCount > 0) {
          var tempDate = new Date(this.year + '/' + this.month + '/01') * 1
          if (_date * 1 < tempDate || _date * 1 > this.lastDate) { // 当天之前和180天之后不可选
            return
          }
        } else {
          // 超出180天范围之前和之后disable灰色的区域不可点击
          if (_date < this.today || _date > this.lastDate) {
            return
          }
        }
      }
      // 如果设置preDisabled==true，小于disableDate的日期都不能点击
      if ((this.preDisabled || this.preDisabled == 'true') && this.isDate && _date * 1 < this.disableDate * 1) {
        return
      }
      if ((this.preDisabled || this.preDisabled == 'true') && !this.isDate && _date * 1 < this.disableStartDate * 1) {
        return
      }

      // 设置不允许操作的日期
      if (this.disabledList.length > 0) {
        var notTemp = this.disabledList.map(item => {
          return new Date(item) * 1
        })
        if (notTemp.includes(_date)) {
          return
        }
      }

      if (_date == this.today || this.dates * 1) {
        this.dates = _date
      }

      if (this.startDates * 1 && this.endDates * 1 && _date > this.endDates * 1) {
        this.startDates = _date
        this.endDates = ''
      } else if (this.endDates * 1 && _date > this.endDates) {
        this.endDates = _date
      } else if (_date >= this.startDates * 1 && _date <= this.endDates * 1) {
        this.startDates = _date
        this.endDates = ''
      } else if (_date < this.startDates * 1) {
        this.startDates = _date
        this.endDates = ''
      } else if (_date > this.startDates * 1) {
        this.endDates = _date
      }

      const dateChoose = this.dateFormat(this.dates)
      const choose = {
        dateTime: this.dates * 1,
        date: dateChoose,
        dateStr: dateChoose.year + '-' + dateChoose.month + '-' + dateChoose.day,
        recent: ''
      }

      const startDateChoose = this.dateFormat(this.startDates)
      const endDateChoose = this.dateFormat(this.endDates)
      const startDateStr = startDateChoose.year + '-' + startDateChoose.month + '-' + startDateChoose.day
      const endDateStr = endDateChoose.year + '-' + endDateChoose.month + '-' + endDateChoose.day
      const choose2 = {
        startDateTime: this.startDates,
        endDateTime: this.endDates,
        startDate: startDateChoose,
        endDate: endDateChoose,
        startDateStr: startDateStr,
        endDateStr: endDateStr,
        startRecent: '',
        endRecent: ''
      }

      // 返回选择的价格
      if (this.priceList.length > 0) {
        this.clickPrice = this.priceList[this.setPrice(day, month, year)] || ''
      }

      if (this.isDate) { // 普通日期选择模式
        if (this.clickPrice) {
          choose.price = this.clickPrice.price
        }
        this.setRecent(_date, choose, 'recent')
        this.$emit('callback', choose)
      } else {
        choose2.countDays = (this.endDates * 1 - this.startDates * 1) / 86400 / 1000
        if (this.priceList.length > 0) {
          this.selectPrice.push(this.clickPrice)
          if (this.selectPrice.length > 2) {
            this.selectPrice.shift()
          }
        }
        if (this.mode == 2) { // 往返模式
          if (this.startDates && !this.endDates) { // 单日往返
            choose2.endDate = choose2.startDate
            choose2.endDateStr = choose2.startDateStr
            choose2.endDateTime = choose2.startDateTime
            choose2.endRecent = choose2.startRecent

            this.emitFuc(choose2, true)
          } else if (this.startDates) { // 去程-返程
            this.emitFuc(choose2)
          }
        } else { // 酒店模式
          if (this.startDates && this.endDates) {
            this.emitFuc(choose2)
          }
        }
      }
    },
    // 返回recent
    setRecent(_date, choose, recent) {
      if (_date == this.today) {
        choose[recent] = '今天'
      } else if (_date - this.today == 24 * 3600 * 1000) {
        choose[recent] = '明天'
      } else if (_date - this.today == 2 * 24 * 3600 * 1000) {
        choose[recent] = '后天'
      }
    },
    //
    emitFuc(choose2, isWf = false) {
      if (this.priceList.length > 0) {
        if (isWf) {
          choose2.startPrice = choose2.endPrice = this.clickPrice && this.clickPrice.price
        } else {
          choose2.startPrice = this.selectPrice[0].price || ''
          choose2.endPrice = this.selectPrice[1].price || ''
        }
      }
      if (isWf) {
        this.setRecent(this.startDates, choose2, 'startRecent')
        this.setRecent(this.startDates, choose2, 'endRecent')
      } else {
        this.setRecent(this.startDates, choose2, 'startRecent')
        this.setRecent(this.endDates, choose2, 'endRecent')
      }

      this.$emit('callback', choose2)
    }
  }
}
</script>

<style lang="scss" scoped>
	div,
	ul,
	li,
	p,
	span,
	i,
	b,
	a {
		margin: 0;
		padding: 0;
		font-size: 28rpx;
	}

	.flex {
		justify-content: space-between;
		display: -webkit-box;
		display: flex;
		box-sizing: border-box;
	}

	.flex-1 {
		width: 100%;
		-webkit-box-flex: 1;
		flex: 1;
	}

	.calendar-tz {
		width: 100%;
		height: 100%;
    color: $font-color-white;
		position: relative;
		overflow-y: scroll;
		z-index: 9;
	}

	.calendar-tz:-webkit-scrollbar {
		display: none
	}

	.calendar-tz .ti {
		font-size: 32rpx;
		padding-top: 0px;
		overflow-y: auto;
	}

	.calendar-tz .ti:-webkit-scrollbar {
		display: none
	}

	.calendar-header-box {
		position: relative;
		height: 80rpx;
	}

	.calendar-header {
		position: absolute;
		width: 100%;
		left: 0;
		right: 0;
		z-index: 9;
		box-shadow: 0 4rpx 30rpx rgba(100, 100, 100, 0.1);
	}

	.calendar-header .week-number {
		background: $color-secondary;
		width: 100%;
	}

	.calendar-header .week-number-item {
		display: inline-block;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		width: 14.28%;
		font-size: 32rpx;
		color: $font-color-white;
	}

	.calendar-wrapper .calendar-title {
		text-align: center;
		line-height: 88rpx;
		height: 88rpx;
		margin: 12rpx 0;
	}

	.calendar-wrapper .calendar-title .dislocal {
		font-size: 24rpx;
		padding: 10rpx 40rpx;
	}

	.calendar-wrapper .calendar-title .local {
		color: #333;
		font-size: 32rpx;
		font-weight: 400;
	}

	.calendar-wrapper .each-month {
		display: inline-block;
		width: 98%;
		margin-left: 1%;
		padding-bottom: 20rpx;
		font-size: 0;
		border-bottom: 2rpx solid $color-border;
	}

	.calendar-wrapper .each-month .each-day {
		position: relative;
		display: inline-block;
		text-align: center;
		vertical-align: bottom;
		padding: 4rpx 0;
		width: 14.28%;
		font-size: 32rpx;
		min-height: 144rpx;
		color: #333;
	}

	.calendar-wrapper .each-month .each-day .calendar-day {
		vertical-align: 8px;
		display: inline-block;
		height: 56rpx;
		width: 56rpx;
		line-height: 56rpx;
		border-radius: 28rpx;
	}

	.calendar-wrapper .each-month .each-day .recent {
		font-size: 24rpx;
		color: $color-primary;
		height: 36rpx;
		line-height: 36rpx;
		text-align: center;
		width: 100%;
	}

	.calendar-wrapper .each-month .each-day .price {
		margin-top: -4rpx;
		height: 36rpx;
		line-height: 36rpx;
		display: block;
		color: $font-color-t2;
		font-size: 24rpx;
		text-align: center;
	}

	.calendar-wrapper .each-month .each-day.today .calendar-day {
		background: $color-background;
		border-radius: 28rpx;
	}

	.calendar-wrapper .each-month .each-day.disabled .recent,
	.calendar-wrapper .each-month .each-day.disabled .price,
	.calendar-wrapper .each-month .each-day.disabled .calendar-day {
		color: $font-color-t3 !important;
	}

	.calendar-wrapper .each-month .each-day.clicktime .calendar-day {
		color: $font-color-white;
		border-radius: 28rpx;
	}
</style>
